<template>
    <el-dialog
        :center="true"
        :show-close="false"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :visible="true"
        custom-class="customClass"
        class="customClass"
        width="400px"
    >
        <div slot="title">
            <div class="img">
                <img src="../assets/Logintitle.png" />
            </div>
            <div>校园借用系统管理</div>
        </div>
        <div class="conten">
            <el-form>
                <el-form-item class="marginBottom">
                    <el-input clearable placeholder="手机号" v-model="user.phone"></el-input>
                </el-form-item>
                <el-form-item class="marginBottom">
                    <el-input clearable placeholder="用户名" v-model="user.userName"></el-input>
                </el-form-item>
                <el-form-item class="marginBottom">
                    <el-input clearable placeholder="QQ" v-model="user.qq"></el-input>
                </el-form-item>
                <el-form-item class="marginBottom">
                    <el-input clearable placeholder="邮箱" v-model="user.email"></el-input>
                </el-form-item>
                <el-form-item class="marginBottom">
                    <el-select v-model="user.userType" placeholder="用户类型">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="marginBottom">
                    <el-input clearable placeholder="请输入密码" v-model="user.passWord" show-password></el-input>
                </el-form-item>
                <el-form-item class="marginBottom">
                    <el-button style="width: 100%" @click="regist" type="primary">注册</el-button>
                    <el-link style="width: 100%" @click="go" type="primary">已有账号？去登陆</el-link>
                </el-form-item>
            </el-form>
        </div>

    </el-dialog>
</template>

<script>
    export default {
        name: "Regist",
        data(){
            return {
                user : {
                    userName : '',
                    userType : 1,
                    phone : '',
                    qq : '',
                    email : '',
                    passWord : '',
                },
                options : [
                    {name : '学生' , value : 1},
                    {name : '教师' , value : 2},
                    {name : '工作人员' , value : 3},
                    {name : '部门账号' , value : 4},
                ],
            }
        },
        methods : {
            go(){
                this.$router.push("/login")
            },
            regist(){
                this.$api.user.userRegist(this.user)
                    .then(response => {
                        console.log(response)
                        this.$message({
                            message : '注册成功',
                            type : 'success'
                        });
                        let self = this;
                        setTimeout(function () {
                            self.$router.push('/login')
                        },1000);
                    })
                    .catch(error => {
                        this.$message.error('注册失败');
                        let self = this;
                        setTimeout(function () {
                            self.$message({
                                message : error,
                                type : 'warning'
                            })
                        },2000)
                    })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .customClass{
        background: url("../assets/login_bg.jpg") no-repeat;
        background-size: cover;
    }
    .img{
        width: 50px;height: 50px;
        margin: 30px auto 20px auto;

        img{
            width: 100%;
        }
    }
    .conten{
        width: 90%;
        margin: 30px auto 20px auto;
        .marginBottom{
            margin-bottom: 35px;
        }
    }
</style>
